<template>
	<!-- 成品发货 -->
	<div>
		<v-card>
			<v-card-title>
				<v-row>
					<v-col cols="12" md="2">
						<v-btn tile color="primary" @click="addProductDeliveryDialog=true">
							添加出货单
						</v-btn>
					</v-col>
					<v-divider class="mx-4" inset vertical></v-divider>
					<v-col cols="12" sm="2" md="1">
						<v-text-field label="子工单号" v-model="productDeliveryQuery.childrencode" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="2" md="1">
						<v-text-field label="项目号" v-model="productDeliveryQuery.projectcode" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="2" md="1">
						<v-text-field label="项目名称" v-model="productDeliveryQuery.projectname" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="2" md="1">
						<v-text-field label="设备名称" v-model="productDeliveryQuery.equipmentName" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="2" md="1">
						<v-text-field label="楼层" v-model="productDeliveryQuery.floor" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="2" md="1">
						<v-text-field label="库号" v-model="productDeliveryQuery.libraryno" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" sm="2" md="2">
						<v-btn depressed color="primary" @click="search">查询</v-btn>
						<v-btn class="ml-2" depressed color="primary" @click="refreshApps">
							刷新</v-btn>
					</v-col>
				</v-row>
			</v-card-title>

			<v-data-table dense class="text-no-wrap" :headers='productDeliveryHeaderList'
				:items="productDeliveryDataList" item-key="id" loading-text="正在加载请稍等......"
				:options.sync="productDeliveryOptions" :loading="productDeliveryLoading" show-expand single-expand
				:footer-props="vuetifyDefaultPage" :server-items-length="productDeliveryTotalCount">
				<template v-slot:item.issend="{ item }">
					<a v-if="item.issend" style="color: #67C23A;">已生成发货单</a>
					<a v-else>待发货</a>
				</template>
				<template v-slot:item.actions="{ item }">
					<div>
						<v-btn small tile color="primary" @click="loadChildrenSelectList(item)">
							添加发货明细
						</v-btn>

						<v-btn small tile color="primary" class="ml-2" @click="printPackingOrder(item)">
							列印装箱单
						</v-btn>
						<v-btn small tile color="primary" class="ml-2" @click="shipmentClick(item)">
							出货
						</v-btn>
					</div>
				</template>
				<template v-slot:expanded-item="{ headers, item }">
					<td :colspan="headers.length">
						<!-- {text: '操作',
						 value: 'actions',
						 align:'center'
						}, -->
						<v-data-table dense class="text-no-wrap" item-key="id" :headers="[
							
							{text: '是否需要出货检验',
							 value: 'ischeck',
							 align:'center'
							},
							{text: '出货检验状态',
							 value: 'checkresult',
							 align:'center'
							},
						{text: '出货名称',
						 value: 'name',
						 align:'center'
						},
						{text: '产品规格及型号',
						 value: 'model',
						 align:'center'
						},
						{text: '出货数量',
						 value: 'qty',
						 align:'center'
						}]" :items="item.detailList" hide-default-footer>
							<template v-slot:item.ischeck="{ item }">
								<a v-if="item.ischeck" style="color: #67C23A;">是</a>
								<a v-else>否</a>
							</template>
							<template v-slot:item.checkresult="{ item }">
								<div v-if="item.ischeck">
									<a v-if="item.checkresult" style="color: #67C23A;">完成</a>
									<a v-else>未完成</a>
								</div>
								<div v-else>
									<a style="color: #ABABAB;">无需检验</a>
								</div>
							</template>
							<!-- <template v-slot:item.actions="{ item }">
								<div>
									<v-btn small tile color="primary" @click="outFactoryCheck(item)">
										出厂检验
									</v-btn>
								</div>
							</template> -->
						</v-data-table>
					</td>
				</template>
			</v-data-table>
		</v-card>
		<v-dialog v-model="addProductDeliveryDialog" width="1000px">
			<v-card>
				<v-card-title>维护发货清单</v-card-title>
				<v-card-text>
					<v-row>
						<v-col cols="12">
							<v-select v-model="prodeliveryModel.type" :items="productDeliveryTypeItems"
								@input="productDeliveryTypeItemSelectEvent" label="选择发货类型" dense outlined>
							</v-select>
						</v-col>
						<v-col cols="12">
							<v-combobox label="项目号" return-object v-model="prodeliveryModel.projectcode"
								:items="projectList" @input="projectItemSelectEvent" persistent-hint small-chips dense
								outlined></v-combobox>
						</v-col>
						<v-col cols="12">
							<v-select label="选择出货仓库" dense outlined v-model="prodeliveryModel.warehouse"
								:items="storageInfoList">
							</v-select>
						</v-col>
						<v-col cols="12">
							<v-select label="选择出货类型" dense outlined v-model="prodeliveryModel.outstorgetype"
								:items="outStorageTypeList">
							</v-select>
						</v-col>
						<v-col cols="12">
							<v-row>
								<v-col cols="5">
									<v-text-field label="出货客户编码" disabled dense outlined :style="this.temp"
										v-model="prodeliveryModel.customercode">
									</v-text-field>
								</v-col>
								<v-col cols="5">
									<v-text-field label="出货客户名称" disabled dense outlined
										v-model="prodeliveryModel.customername">
									</v-text-field>
								</v-col>
								<v-col cols="2">
									<v-btn tile color="primary" @click="openSelectCustomerDialog">
										选择客户
									</v-btn>
								</v-col>
							</v-row>
						</v-col>
						<v-col cols="12">
							<v-text-field label="楼层" dense outlined v-model="prodeliveryModel.floor">
							</v-text-field>
						</v-col>
						<v-col cols="12">
							<v-text-field label="库号" dense outlined v-model="prodeliveryModel.libraryno">
							</v-text-field>
						</v-col>
					</v-row>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn class="ml-3" color="success" text @click="addProdeliverySubmit">
						确定
					</v-btn>
					<v-btn color="blue darken-1" text @click="cannel">
						退出
					</v-btn>
				</v-card-actions>
			</v-card>

		</v-dialog>

		<v-dialog v-model="addProductDeliveryDetailDialog" width="1000px">
			<v-card>
				<v-card-title>维护发货明细</v-card-title>
				<v-card-text>
					<v-row>
						<v-col cols="12" sm="6" md="6">
							<v-combobox label="产品" v-model="productDeliveryDetailModel.childrenid"
								:items="childrenSelectList" persistent-hint small-chips dense outlined
								@input="childrenSelectEvent"></v-combobox>
						</v-col>
						<v-col cols="12" sm="6" md="6">
							<v-text-field label="产品规格及型号" dense outlined v-model="productDeliveryDetailModel.model">
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="6" md="6">
							<v-text-field label="数量" dense outlined v-model="productDeliveryDetailModel.qty">
							</v-text-field>
						</v-col>
						<v-col cols="12" sm="6" md="6">
							<v-text-field label="备注" dense outlined v-model="productDeliveryDetailModel.description">
							</v-text-field>
						</v-col>
						<v-col cols="12" md="6">
							<v-checkbox label="是否需要出货检验" dense outlined v-model="productDeliveryDetailModel.ischeck">
							</v-checkbox>
						</v-col>
					</v-row>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn class="ml-3" color="success" text @click="prodeliveryDetailSubmit">
						添加
					</v-btn>
					<v-btn color="blue darken-1" text @click="cannel">
						退出
					</v-btn>
				</v-card-actions>
			</v-card>

		</v-dialog>
		<!-- 列印装箱单 -->
		<packingorder :productDelivery="productDelivery"></packingorder>
		<productdeliverycheck :checkInfo="checkInfo"></productdeliverycheck>
		<customerdatalist :customerCommentModel="customerCommentModel" :callBack="customerCommentCallBack">
		</customerdatalist>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import Packingorder from '../components/product_delivery/packingorder.vue'
	import Productdeliverycheck from '../components/product_delivery_oqc/product_delivery_check.vue'
	import CustomerDataList from '../../pdm/components/CustomerDataList.vue'
	import {
		format,
		parseISO
	} from 'date-fns'

	export default {
		components: {
			Packingorder,
			Productdeliverycheck,
			customerdatalist: CustomerDataList
		},
		name: 'mes_product_delivery',
		data: () => ({
			projectList: [],
			productDeliveryEL: 1,
			types: ['ProductDeliveryType'],
			//所有发货类型
			productDeliveryTypeItems: [],
			productDeliveryQuery: {
				type: null,
				childrencode: "",
				projectcode: "",
				projectname: "",
				equipmentName: "",
				floor: "",
				libraryno: "",
			},
			productDeliveryHeaderList: [{
					text: '操作',
					value: 'actions',
					align: 'center'
				},

				{
					text: '发货时间',
					value: 'deliverytime'
				},
				{
					text: '是否已发货',
					value: 'issend'
				},
				{
					text: '项目号',
					value: 'projectcode'
				},
				{
					text: '项目名称',
					value: 'projectname'
				},
				{
					text: '发货类型',
					value: 'typename'
				},
				{
					text: '出货仓库编码',
					value: 'warehouse'
				},
				{
					text: '出货客户编码',
					value: 'customercode'
				},
				{
					text: '楼层',
					value: 'floor'
				},
				{
					text: '库号',
					value: 'libraryno'
				},
			],
			productDeliveryDataList: [],
			productDeliveryTotalCount: 0,
			productDeliveryLoading: true,
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
			},
			productDeliveryOptions: {
				//页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			addProductDeliveryDialog: false,
			prodeliveryModel: {
				outstorgetype: "23"
			},
			//发货明细
			addProductDeliveryDetailDialog: false,
			childrenSelectList: [],
			productDeliveryDetailModel: {},
			productDeliveryDetailList: [],
			//列印装箱单对话框组件
			productDelivery: {
				productDeliveryModel: {},
				printPackingOrderDialog: false,
			},
			//设备出厂检验对话框组件
			checkInfo: {
				childrenId: 0,
				shipmentModel: {},
				checkDialog: false,
			},
			storageInfoList: [],
			outStorageTypeList: [],
			customerCommentModel: {
				dialog: false,
				loadCustomerUrl: `MES/MESProductDelivery/LoadCustomerListPage`
			},
			temp: {}
		}),
		created() {
			this.loadEnum()
			this.loadStorageList()
			this.loadSyncGetOutRdtype()
		},
		watch: {
			productDeliveryOptions: {
				handler() {
					this.search()
				},
				deep: true
			},
		},
		methods: {
			...mapActions('mes/common', [
				//获取物料信息
				'LoadType'
			]),
			...mapActions('mes/product_delivery', [
				//获取物料信息
				'LoadProductDelivery',
				'AddProductDelivery',
				'LoadProjects',
				'LoadChildrenToWebSelect',
				'AddProductDeliveryDetail'
			]),
			openSelectCustomerDialog() {
				this.customerCommentModel.dialog = true
			},
			customerCommentCallBack(customer) {
				this.temp = customer
				this.prodeliveryModel.customercode = customer.cCusCode
				this.prodeliveryModel.customername = customer.cCusName
			},
			async loadEnum() {
				this.productDeliveryTypeItems = await this.LoadType({
					pramterEnums: this.types
				})
			},
			//加载仓库信息
			async loadStorageList() {
				const response = await this.$httpRequest({
					url: `MES/MESProductDelivery/GetStorageList`,
					method: 'get'
				})

				if (response.status == 1) {
					this.storageInfoList = response.data
				}
			},
			//加载出货类型
			async loadSyncGetOutRdtype() {
				const response = await this.$httpRequest({
					url: `MES/MESProductDelivery/SyncGetOutRdtype`,
					method: 'get'
				})

				if (response.status == 1) {
					this.outStorageTypeList = response.data
				}
			},
			async search() {
				this.productDeliveryLoading = true
				var response = await this.LoadProductDelivery({
					productDeliveryQuery: this.productDeliveryQuery,
					pageNumber: this.productDeliveryOptions.page,
					pageSize: this.productDeliveryOptions.itemsPerPage
				})
				if (response.status == 1) {
					this.productDeliveryDataList = response.data.result
					this.productDeliveryTotalCount = response.data
						.pagination.totalRecords

				} else {
					this.$message.error(response.info)
				}
				this.productDeliveryLoading = false
			},
			refreshApps() {
				this.productDeliveryQuery = {}
				this.search()
			},

			async addProdeliverySubmit() {
				//根据项目/楼层/库号 查询系统是否有相同的数据
				this.productDeliveryQuery = {}
				this.productDeliveryQuery.type = this.prodeliveryModel.type
				this.productDeliveryQuery.projectcode = this.prodeliveryModel.projectcode
				this.productDeliveryQuery.floor = this.prodeliveryModel.floor
				this.productDeliveryQuery.libraryno = this.prodeliveryModel.libraryno

				var response = await this.LoadProductDelivery({
					productDeliveryQuery: this.productDeliveryQuery,
					pageNumber: 1,
					pageSize: 10
				})

				if (response.status == 1 && response.data.pagination.totalRecords >= 1) {
					this.productDeliveryDataList = response.data.result
					this.productDeliveryTotalCount = response.data
						.pagination.totalRecords
					this.cannel()
					this.$message.error('系统已存在相同的发货清单!')
					this.search()
					return
				}
				this.submitProdelivery()
			},
			//提交发货明细
			async submitProdelivery() {

				if (!this.prodeliveryModel.projectcode) {
					this.$message.error('请选择项目信息!')
					return
				}
				this.prodeliveryModel.projectname = this.projectList.filter(r => r.value == this.prodeliveryModel
					.projectcode)[0].projectname
				var addResponse = await this.AddProductDelivery({
					data: this.prodeliveryModel
				})
				if (addResponse.status == 1) {
					this.prodeliveryModel = addResponse.data
					this.search()
					this.cannel()
					this.$message.success(addResponse.info)
				} else {
					this.$message.error(addResponse.info)
				}

			},
			cannel() {
				this.addProductDeliveryDialog = false
				this.addProductDeliveryDetailDialog = false
			},
			//加载项目对应的所有子工单信息
			async loadChildrenSelectList(item) {
				var response = await this.LoadChildrenToWebSelect({
					type: item.type,
					projectCode: item.projectcode
				})

				if (response.status == 1) {
					this.childrenSelectList = response.data
					this.addProductDeliveryDetailDialog = true
					this.productDeliveryDetailModel.prodeliveryid = item.id
				} else {
					this.$message.error(response.info)
				}

			},
			childrenSelectEvent(item) {
				if (item == null)
					return
					
					this.productDeliveryDetailModel.name = item.name
					this.productDeliveryDetailModel.qty = item.completecount
					this.productDeliveryDetailModel.model = item.model
					this.productDeliveryDetailModel.childrenid = item.id
					this.productDeliveryDetailModel.childrencode = item.code
					this.productDeliveryDetailModel.unit = item.unit
					
				var children = this.childrenSelectList.filter(r => r.value == item)[0]
				if (children == null)
					return

				
				this.productDeliveryDetailModel.name = children.name
				this.productDeliveryDetailModel.qty = children.completecount
				this.productDeliveryDetailModel.model = children.specifications
				this.productDeliveryDetailModel.childrenid = children.id
				this.productDeliveryDetailModel.childrencode = children.code
				this.productDeliveryDetailModel.unit = children.unit
			},
			//添加发货明细
			async prodeliveryDetailSubmit() {
				var response = await this.AddProductDeliveryDetail({
					data: this.productDeliveryDetailModel
				})
				var tempProdeliveryid = this.productDeliveryDetailModel.prodeliveryid
				if (response.status == 1) {
					this.productDeliveryDetailModel = {}
					this.productDeliveryDetailModel.prodeliveryid = tempProdeliveryid
					this.$message.success("添加明细成功,可继续添加!")
					this.search()
				} else {
					this.$message.error('添加明细失败!')
				}
			},
			//装箱单对话框组件
			printPackingOrder(item) {
				this.productDelivery.productDeliveryModel = item
				this.productDelivery.productDeliveryModel.packtime = format(parseISO(new Date().toISOString()),
					'yyyy-MM-dd')
				this.productDelivery.printPackingOrderDialog = true
			},
			//设备出厂检验对话框组件
			outFactoryCheck(item) {
				this.checkInfo.checkDialog = true
				this.checkInfo.childrenId = item.childrenid
			},
			async shipmentClick(item) {
				var response = await this.$httpRequest({
					url: `MES/MESProductDelivery/ShipMent?prodeliveryId=${item.id}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.$message.success(response.info)
					this.search()
				} else {
					this.$message.error(response.info)
				}
			},
			//项目选择
			async projectItemSelectEvent(project) {
				console.log(project)
				this.prodeliveryModel.customercode = project.customercode
				this.prodeliveryModel.customername = project.customername
				this.prodeliveryModel.projectname = project.projectname
				this.prodeliveryModel.projectcode = project.value
			},
			//出货类型选择
			async productDeliveryTypeItemSelectEvent(type) {

				this.projectList = await this.LoadProjects({
					type: type
				})
			},
		}
	}
</script>

<style>
</style>
